<template>
    <div class="page">
        <!-- 数据库条目标题 -->
        <div class="title">{{ entry.value }}</div>
        <!-- 数据库条目内容 -->
        <el-scrollbar v-if="type !== ''" class="content">
            <!-- 列表渲染各字段 -->
            <div v-for="value,key in info">
                <!-- 字段名称 -->
                <p class="key">{{ key }}</p>
                <!-- 字段内容 -->
                <p class="value">{{ value }}</p>
            </div>
        </el-scrollbar>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
// 导入全局状态-数据库条目
import { useEntryStore } from '../stores/entry';

// 使用全局状态-数据库条目
const entry=useEntryStore();
// 初始化状态-数据库条目信息、数据库条目类型
const info=ref({});
const type=ref('');
// 定义数据库条目信息类型
interface EntryInfo{
    (index:string):string
}
// 根据全局状态将匹配的数据库条目渲染到页面
window.electronAPI.match(entry.value).then((result:EntryInfo)=>{
    info.value=result;
    type.value=(entry.value.length === 4)?'complex':'ligand';
});
</script>

<style lang="scss" scoped>
/* 页面布局样式 */
.page{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height:85vh;
}
/* 条目标题布局样式 */
.title{
    font-size:5vh;
    font-weight:bold;
    color:gold;
    border-bottom: 1vh white dashed;
    width:80vw;
    text-align: center;
    margin-bottom: 2vh;
}
/* 条目内容布局样式 */
.content{
    height:80vh;
    overflow: hidden;
    scroll-behavior: auto;
    width:80vw;
}
/* 字段名称布局样式 */
.key{
    font-size:4.5vh;
    font-weight: bold;
    height:5vh;
}
/* 字段内容布局样式 */
.value{
    font-size: 3vh;
    border-bottom: 0.5vh solid white;
    color:skyblue;
}
</style>
